import React, { useEffect, useState } from 'react'
import { message, Table, Button, Popconfirm, Switch } from 'antd';
import { Action, AuthButton, TableCard } from 'components';
import { GetuserList } from './service'
import { PlusOutlined } from '@ant-design/icons'
import AddUserModel from './AddUserModel'
import EditUserModel from './EditUserModel'
const Userindex = () => {



  const [userList, setuserList] = useState([])

  const [isFetching, setIsFetching] = useState(false)

  const [isModalOpen, setIsModalOpen] = useState(false)

  const [EditMsg, setEditMsg] = useState({})

  const [EditModalOpen,setEditModalOpen] = useState(false)

  const [SearchParams, setSearchParams] = useState({
    current: 1,
    pageSize: 10,
    username: "",
    name: "",
    status: ''

  });
  useEffect(() => {
    Getdata(SearchParams)
  }, [])
  const Getdata = (Params) => {
    setIsFetching(true)
    GetuserList(Params).then(res => {
      console.log(res)
      setuserList(res.data)
      setIsFetching(false)
    })
  }

  const onChange = (checked) => {
    console.log(`switch to ${checked}`);
  };

  return (
    <div>
      <TableCard
        rowKey="id"
        dataSource={userList}
        pagination={false}
        loading={isFetching}
        onReload={Getdata}
        actions={[
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {

              setIsModalOpen(true)
            }}
          >新建</Button>
        ]}
      >


        <Table.Column title="真实姓名" dataIndex="username" />

        <Table.Column title="真实姓名" dataIndex="real_name" />
        <Table.Column title="状态" dataIndex="status" render={(status) => {
          return <Switch checked={status} onChange={onChange} />
        }

        } />


        <Table.Column title="备注" dataIndex="note" />

        {/* <Table.Column title="真实姓名" dataIndex="last_login_ip" /> */}

        <Table.Column width={80} title="操作" render={info => (
          <Action>

            <Action.Button
              auth="host.console.edit"
              onClick={() => {
                setIsModalOpen(true)
              }}
            >编辑</Action.Button>
            <Popconfirm placement="top" title={`是否删除类型 ${info.type_name}`} onConfirm={() => {

            }} okText="删除" cancelText="取消">
              <Action.Button danger


              >删除</Action.Button>
            </Popconfirm>

          </Action>
        )} />
      </TableCard>
      {
        isModalOpen && (
          <AddUserModel
            isModalOpen={isModalOpen}
            setIsModalOpen={setIsModalOpen}
            getDataSource={Getdata}
          />
        )
      }
      {
        EditModalOpen && (
          <EditUserModel
            isModalOpen={EditModalOpen}
            setIsModalOpen={setEditModalOpen}
            getDataSource={Getdata}
            EditMsg={EditMsg}
          />
        )
      }
    </div>
  )
}

export default Userindex